import React, { PureComponent } from 'react';
import { CenterPage, CenterBottom } from './style';
import { BorderBox6, BorderBox8, ScrollRankingBoard, DigitalFlop } from '@jiaminghi/data-view-react'
import Map from './charts/Map';
import Data from './data'
import { connect } from 'dva';
import sty from '../../assets/css/global.module.scss'
import Img1 from '../../assets/images/center-details-data1.png'
import Img2 from '../../assets/images/center-details-data2.png'

class index extends PureComponent {
  constructor(props) {
    super(props)
    this.state = {
      DataNums: {
        inSchool: 0,
        todayVisit: 0
      }
    };
  }

  a = {
    data: [
      {
        name: '周口',
        value: 55
      },
      {
        name: '南阳',
        value: 120
      },
      {
        name: '西峡',
        value: 78
      },
      {
        name: '驻马店',
        value: 66
      },
      {
        name: '新乡',
        value: 80
      },
      {
        name: '信阳',
        value: 45
      },
      {
        name: '漯河',
        value: 29
      }
    ],
    rowNum: 3
  }

  render() {
    const { DataNums } = this.state
    const { inSchool, todayVisit } = this.props
    const { detailsList, mapData } = Data({
      inSchool, todayVisit
    });
    const arr = [Img1, Img2]
    return (
      <CenterPage className={sty.CenterPage}>
        <CenterBottom>
          <div className={sty.detailList}>
            {detailsList
              ? detailsList.map((item, index) => {
                return (
                  <BorderBox8 style={{ padding: '10px 8px', marginRight: !index ? 30 : '' }}>
                    <div className={sty.detailListItem} key={index}>
                      <img
                        className={sty.detailListItemIMG}
                        src={arr[index]}
                        alt={item.title}
                      />
                      <div className={sty.detailItemText}>
                        <h3>{item.title}</h3>
                        <span>
                          {/* {item.number} */}
                          <DigitalFlop config={{
                            number: [item.number],
                          }} style={{ width: '145px', height: '68px' }} />
                        </span>
                        <span className='unit'>{item.unit}</span>
                      </div>
                    </div>
                  </BorderBox8>
                );
              })
              : ''}
          </div>
        </CenterBottom>
        <ScrollRankingBoard config={this.a} style={{ width: '150px', height: '100px', marginTop: 80, background: 'none', position: 'absolute', top: 200, marginRight: 150 }} />
        <Map mapData={mapData}></Map>
      </CenterPage>
    );
  }
}

const mapStateToProps = ({ centerPage: { inSchool, todayVisit } }) => {
  return {
    inSchool, todayVisit
  };
};

const mapStateToDispatch = dispatch => ({});

export default connect(mapStateToProps, mapStateToDispatch)(index);
